<template>
  <div class="bar">
    <!-- 左边全选的部分 -->
    <div class="choose">
      <check-button
        :is-check="isCheckAll"
        class="bar-btn"
        @click.native="SelectAll"
      />
      <span class="choose-all">全选</span>
    </div>
    <!-- 中间价格部分 -->
    <div class="price">
      合计: <span class="allPrice">{{ getSumMoney }}</span
      >元
    </div>
    <!-- 右边去计算部分 -->
    <div class="calculate">提交订单({{ getSumCount }})</div>
  </div>
</template>

<script>
// 引入打勾组件
import CheckButton from "../../../components/content/checkButton/CheckButton.vue";
// 引入vuex功能，将getters里面的属性转化成我们组件的计算属性,导入的格式是固定下方的
// import {mapGetters} from 'vuex'
export default {
  name: "CartButtonBar",
  components: {
    CheckButton,
  },
  data() {
    return {
      flag: true,
    };
  },
  computed: {
    getSumCount() {
      return this.$store.state.cartList.filter((item) => {
        return item.checked;
      }).length;
    },
    getSumMoney() {
      return this.$store.state.cartList
        .filter((item) => {
          return item.checked;
        })
        .reduce((preValue, item) => {
          return preValue + item.price * item.count;
        }, 0);
    },
    isCheckAll() {
      return !this.$store.state.cartList.filter((item) => !item.checked).length;
    },
  },
  methods: {
    SelectAll() {
      if (this.flag) {
        for (
          let index = 0;
          index < this.$store.state.cartList.length;
          index++
        ) {
          this.$store.state.cartList[index].checked = true;
        }
        this.isCheckAll = true;
        this.flag = false;
      } else {
        for (
          let index = 0;
          index < this.$store.state.cartList.length;
          index++
        ) {
          this.$store.state.cartList[index].checked = false;
        }
        this.isCheckAll = false;
        this.flag = true;
      }
    },
  },
};
</script>

<style scoped>
.bar {
  height: 40px;
  position: relative;
  display: flex;
  z-index: 115;
  background-color: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  bottom: 40px;
  line-height: 40px;
}
.bar-btn {
  display: inline-block;
  position: absolute;
  top: 10px;
  color: #fff;
  line-height: 20px;
}
.choose-all {
  position: absolute;
  left: 30px;
}
.choose {
  width: 80px;
}
.price {
  flex: 1;
}
.allPrice {
  color: var(--color-tint);
  margin: 0 3px;
}
.calculate {
  width: 100px;
  text-align: center;
  background-image: linear-gradient(90deg, #ff6034, #ee0a24);
  color: #fff;
}
</style>